<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="24">
                欢迎你，{{ userName }}
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                当前时间：{{ now }}
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup name="index">

const store = useStore();
const userName = ref(store.state.user.name)

const now = ref('')

const getZero = (val) => {
    let tmp = ''
    if (parseInt(val) < 10) {
        tmp = '0' + val;
    } else if (parseInt(val) >= 10) {
        tmp = val;
    }
    return tmp
}

const getDate = () => {
    let date = new Date()
    let Y = date.getFullYear(), // 年  
        M = date.getMonth() + 1, //月  
        D = date.getDate(), //日
        h = date.getHours(), //小时
        m = date.getMinutes(), //分钟
        s = date.getSeconds(); //秒数
    let tmp = Y + '-' + getZero(M) + '-' + getZero(D) + ' ' + getZero(h) + ':' +
        getZero(m) + ':' + getZero(s);
    now.value = tmp
}

getDate()

setInterval(() => {
    getDate()
}, 1000)

</script>
<style lang="scss">
.box-card {
    width: 26vw;
    height: 30vh;
    margin-top: 2vh;
    margin-left: 2vw;
}

.el-row {
    margin-bottom: 6vh;
}
</style>